<template>
  <div id="main" style="background-image: url(static/background.png)">
    <top></top>
    <div style="position: absolute; z-index: 9999; top: 1%; left: 1%; display: table; vertical-align: middle" v-on:click="back">
      <span class="s1"><img src="static/ll.png" style="width: 40px; height: 40px"></span>
      <span class="s1" style="color: white; font-size: xx-large; font-family: 'Microsoft Himalaya'">返回</span>
    </div>
    <form>
      <div style="margin: 0 auto; margin-top: 6%; width: 60%; height: 500px; border-radius: 10px; background: rgba(255, 255, 255, 0.6);
    padding-top: 5%; padding-left: 5%; padding-right: 5%; padding-bottom: 5%; position: relative">
        <div style="width: 80%; height: 100%; margin: 0 auto">
          <div style="margin-left: 15%; margin-right: 15%; text-align: center;">
            <div style="background: steelblue; border-radius: 10px 10px 0 0">
              <span style="font-size: xxx-large; color: white; text-align: center">修改密码</span>
            </div>
            <div style="background: white; padding-bottom: 15px">
              <table style="margin: 0 auto; border-spacing: 25px 25px; border-style: none">
                <tr>
                  <td class="t2" width="30%">旧密码</td><td width="70%"><input type="text" name="goodname" class="i1" id="goodsname"></td>
                </tr>
                <tr>
                  <td class="t2">新密码</td><td><input type="text" name="goodprice" class="i1" id="goodsprice"></td>
                </tr>
                <tr>
                  <td class="t2">确认密码</td><td><input type="text" name="description" class="i1" id="dscription"></td>
                </tr>
              </table>
              <span style="margin-right: 5%"><input class="i2" type="button" value="提交" v-on:click="upload"></span><span><input type="reset" value="重置" class="i2"></span>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
import top from "../components/top";
export default {
  components: {
    top
  },
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    back: function () {
      this.$router.push("/setting");
    }
  }
}
</script>

<style scoped>
#main {
  background-size: 100% 100%;
  height: 100%;
  position: fixed;
  width: 100%
}
.navbar11 {
  margin: 0 auto;
  margin-bottom: 0;
  position: fixed;
  left: 15px;
  right: 15px;
  z-index: 9999;
}
.sidebar {
  background: lightslategray;
  padding: 0;
  position: fixed;
  top: 15%;
  width: 10%;
  /*bottom: 15%;*/
}
.content {
  position: fixed;
  top: 15%;
  right: 0;
  bottom: 0;
  overflow: scroll;
}

table.title{
  position: fixed;
  width: 98%;
  height: 10%;
  margin: 0 auto;
  top: 0;
  background-color: #037bd2;
}
#title{
  font-size: xxx-large;
  color: whitesmoke;
}
button.title_button{
  background-color: #037bd2;
  font-size: xx-large;
  color: whitesmoke;
  transition-duration: 0.4s;
  border: none;
  width: 100%;
}
.title_button:hover{
  /*background-color: lightblue; !* Green *!*/
  color: lightgray;
}
.title_button:active{
  /*background-color: lightblue; !* Green *!*/
  color: lightslategrey;
  border: none;
}
#title_tr{
  color: #037bd2;
  border-style: none;
}
td.title_td{
  border-style: none;
}
span{
  text-align: center;
}
img{
  border-radius: 80%;
  width: 300px;
  height: 300px;
}
#imglist{
  text-align: center;
}
#imglist img{
  float: left;
}
.left:hover{
  background-color: slategrey;
}
a.astyle{
  background-color: #037bd2;
  font-size: xx-large;
  color: whitesmoke;
  transition-duration: 0.4s;
  border: none;
  width: 100%;
  text-decoration: none;
  cursor:pointer
}
.astyle:hover{
  color: lightgray;
}
input.i1{
  border: 1px solid #ccc;
  padding: 7px 0px;
  border-radius: 10px;
  padding-left:5px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  width: 300px;
  height: 30px;
}
input.i1:focus{
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px dodgerblue,0 0 8px dodgerblue;
  box-shadow: inset 0 1px 1px white,0 0 8px dodgerblue;
}
input.i2{
  background-color: salmon; /* Green */
  border: none;
  color: white;
  padding: 10px 28px;
  margin-top: 5%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: x-large;
  border-radius: 5px;
  font-style: inherit;
  font-family: "Microsoft Himalaya";
  cursor: pointer;
}
.bt1{
  background-color: salmon; /* Green */
  border: none;
  color: white;
  padding: 10px 28px;
  margin-top: 5%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: x-large;
  border-radius: 5px;
  font-style: inherit;
  font-family: "Microsoft Himalaya";
  cursor: pointer;
}
#titleText{
  background-color: #037bd2;
  font-size: xxx-large;
  color: whitesmoke;
  transition-duration: 0.4s;
  border: none;
  width: 100%;
  text-decoration: none;
  cursor:pointer
}
.t2{
  color: black;
  font-size: x-large;
  font-family: "Microsoft Himalaya";
  font-style: inherit;
}
input::-webkit-input-placeholder { /* WebKit browsers */
  color: red;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: red;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: red;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: red;
}
input:focus::-webkit-input-placeholder {
  color:transparent;
}
input:focus:-moz-placeholder {
  color:transparent;
}
input:focus::-moz-placeholder {
  color:transparent;
}
input:focus:-ms-input-placeholder {
  color:transparent;
}
input{
  font-family: "Microsoft Himalaya";
  font-style: inherit;
  font-size: large;
}
.s1 {
  cursor: pointer;
  display: table-cell;
  vertical-align: middle;
}
</style>
